import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Alert,
    FlatList,
    TextInput,
    Linking,
    Image,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl } from '../../utils/ComFunction'
import Header from "../../components/header";
import LogisticsInfoPop from './LogisticsInfoPop';
import { conditionObjWithType } from '../../utils/Conditions'


const screenW = Dimensions.get('window').width;

let navigation

export default class LogisticsTrackPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            logisticsNo: this.props.route.params.logisticsNo,
            data: {},
            showLogisticsInfoPop: false,
            logisticsDetailROList: [],
            logisticsDriverProdRO: {}
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData() {
        HttpUtils.getRequest(HttpUrls.getByLogisticsNo, { logisticsNo: this.state.logisticsNo })
            .then((result) => {
                if (result.code == 0) {
                    let data = result.data;
                    data.shippingAddress = data.shippingAddress ? data.shippingAddress.replace(/._/g, ' ') : '';
                    data.deliveryAddress = data.deliveryAddress ? data.deliveryAddress.replace(/._/g, ' ') : '';
                    data.deliveryAddress = data.deliveryAddress ? data.deliveryAddress.replace('\n', '') : '';
                    data.carName = data.carName ? data.carName.replace(/#/g, ' ') : '';
                    this.setState({
                        data: data,
                        logisticsDetailROList: data.logisticsDetailROList ? data.logisticsDetailROList : [],
                        logisticsDriverProdRO: data.logisticsDriverProdRO ? data.logisticsDriverProdRO : {}
                    })

                    console.log('logisticsDetailROList', data.logisticsDetailROList )
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                ToastToUser(error)
            });
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} hideSepLine={true} Title={'物流动态'} ></Header>
                <ScrollView style={{ flex: 1 }}>
                    <View style={styles.logisticsBox}>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                            <Text style={styles.logisticsTitle}>{'物流单号：'+(this.state.data.outLogisticsNo ? this.state.data.outLogisticsNo:'')}</Text>
                            <Text style={styles.statusText}>{conditionObjWithType('logisticsStatus')[this.state.data.logisticsStatus]}</Text>
                        </View>
                        
                        <View style={styles.logisticsCityBox}>
                            <View style={styles.logisticsCityItemBox}>
                                <Text style={styles.logisticsCityText}>{this.state.data.shippingAddress}</Text>
                            </View>
                            <View style={styles.arrowBox}>
                                <Image style={styles.logisticsArrowImg} source={require('source/image/logistics_arrow.png')} />
                                <Text style={styles.statusText}>{this.getTransportStatus()}</Text>
                            </View>
                            <View style={styles.logisticsCityItemBox}>
                                <Text style={styles.logisticsCityText}>{this.state.data.deliveryAddress}</Text>
                            </View>
                        </View>
                        <View style={styles.feeBox}>
                            <View style={styles.feeItemBox}>
                                <Text style={styles.feeTitleText}>实际费用</Text>
                                <Text style={styles.feeText}>{(this.state.data.totalCost/100).toFixed(2) + '元'}</Text>
                            </View>
                            <TouchableOpacity
                                style={[styles.feeItemBox, { height: 22, marginTop: 20 }]}
                                onPress={() => {
                                    this.setState({
                                        showLogisticsInfoPop: true
                                    })
                                }}
                            >
                                <Text style={styles.feeTitleText}>板车信息</Text>
                                <Image style={styles.arrowImg} source={require('source/image/comm/arrow_gray_icon.png')} />
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View style={styles.logisticsBox}>
                        <Text style={[styles.logisticsTitle, { marginBottom: 14 }]}>{'物流信息'}</Text>
                        <View style={styles.logisticsInfoBox}>
                            {
                                this.state.logisticsDetailROList.map((item, index) => {
                                    return (
                                        <View style={styles.logisticsItemBox}>
                                            <View style={index == 0 ? styles.logisticsDot : styles.logisticsDot1} />
                                            {
                                                index < this.state.logisticsDetailROList.length - 1 ?
                                                    <View style={[styles.verticalLine, { backgroundColor: index == 0 ? '#FF7B00' : '#666666' }]} />
                                                    :
                                                    null
                                            }

                                            <Text style={[styles.reportTimeText, { color: index == 0 ? '#333' : '#666' }]}>{moment(item.reportTime).format('YYYY-MM-DD HH:mm:ss') }</Text>
                                            <Text style={[styles.addressText, { color: index == 0 ? '#333' : '#666' }]}>{item.address}</Text>
                                        </View>
                                    )
                                })
                            }
                        </View>

                    </View>

                </ScrollView>

                {
                    this.state.showLogisticsInfoPop ?
                        <LogisticsInfoPop data={this.state.logisticsDriverProdRO} cancelHandler={() => {
                            this.setState({
                                showLogisticsInfoPop: false
                            })
                        }} />
                        :
                        null
                }

            </View>
        )
    }

    /**
     * 
     *  运输状态：1:待提车(默认状态, 2:已提车 , 3:运输中, 4:待送车, 5:待交车, 6:已交车, 7:已取消	
     */
    getTransportStatus(){
        if(this.state.data.transportStatus == 1){
            return '待提车'
        }else if(this.state.data.transportStatus == 2){
            return '已提车'
        }else if(this.state.data.transportStatus == 3){
            return '运输中'
        }else if(this.state.data.transportStatus == 4){
            return '待送车'
        }else if(this.state.data.transportStatus == 5){
            return '待交车'
        }else if(this.state.data.transportStatus == 6){
            return '已交车'
        }else if(this.state.data.transportStatus == 7){
            return '已取消'
        }
        
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    logisticsBox: {
        marginTop: 10,
        flexDirection: 'column',
        width: '100%',
        backgroundColor: '#FFF',
        padding: 16,
    },
    logisticsTitle: {
        fontSize: 14,
        fontWeight: '500',
        color: '#333333'
    },
    logisticsCityBox: {
        marginTop: 22,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    logisticsCityItemBox: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    logisticsCityText: {
        fontSize: 15,
        fontWeight: '500',
        color: '#333333',
        lineHeight: 20,
    },
    arrowBox: {
        paddingHorizontal: 10,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    logisticsArrowImg: {
        width: 40,
        height: 6,
    },
    statusText: {
        marginTop: 5,
        fontSize: 14,
        fontWeight: '500',
        color: '#FF7B00'
    },
    feeBox: {
        marginTop: 12,
        width: '100%',
        backgroundColor: '#F4F4F4',
        borderRadius: 6,
        paddingHorizontal: 10,
        paddingVertical: 14
    },
    feeItemBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%'
    },
    feeTitleText: {
        fontSize: 14,
        color: '#666666'
    },
    feeText: {
        fontSize: 14,
        color: '#FF7B00'
    },
    arrowImg: {
        width: 12,
        height: 12
    },
    logisticsInfoBox: {
        flexDirection: 'column',
    },
    logisticsItemBox: {
        marginBottom: 4,
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },
    logisticsDot: {
        position: 'absolute',
        left: 0,
        top: 3,
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: '#FF7B00'
    },
    logisticsDot1: {
        position: 'absolute',
        left: 0,
        top: 3,
        width: 8,
        height: 8,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#666666'
    },
    verticalLine: {
        position: 'absolute',
        left: 3,
        width: 1,
        top: 18,
        bottom: 0,
        backgroundColor: '#FF7B00'
    },
    reportTimeText: {
        marginLeft: 24,
        fontSize: 12,
        fontWeight: '500',
        color: '#333'
    },
    addressText: {
        marginLeft: 24,
        marginTop: 12,
        marginBottom: 22,
        fontSize: 14,
        fontWeight: '500',
        color: '#333333'
    }


})